import 'package:provider/provider.dart';
import 'package:xixi/global.dart';
import 'package:xixi/http/api.dart';
import 'package:flutter/material.dart';
import 'package:xixi/main_manager.dart';

class DetailPage extends StatefulWidget {
  DetailPage({Key key, this.id, this.type}) : super(key: key);
  final String id;
  final String type;
  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  var _data;
  var _info;
  @override
  void initState() {
    String _id = widget.id;
    String _type = widget.type;
    getIchongDetail(_id, _type).then((res) {
      setState(() {
        _data = res;
        _info = {
          'id': int.parse(_id),
          'name': _data['name'],
          'img': _data['img'],
          'intro': _data['intro'],
          'key': _type,
        };
      });
    });
    super.initState();
  }

  List<Widget> renderDesc(items) {
    List<Widget> list = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (item['content'] != '') {
        list.add(SizedBox(height: 5));
        list.add(
          Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(5),
            decoration: BoxDecoration(
              border: Border.all(
                width: 1.5,
                color: Global.primaryColor.withOpacity(0.5),
              ),
              borderRadius: BorderRadius.circular(5),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  item['title'],
                  style: TextStyle(
                    color: Global.primaryColor,
                    fontSize: 15,
                    fontWeight: FontWeight.w700,
                  ),
                ),
                SizedBox(height: 5),
                Container(
                  decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        width: 1,
                        color: Global.primaryColor.withOpacity(0.1),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 8),
                Text(
                  "　　${item['content']}",
                  style: TextStyle(
                    color: Global.fontColor,
                    fontSize: 12,
                    fontWeight: FontWeight.w500,
                    height: 1.9,
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    MainManager _mainManager = Provider.of<MainManager>(context);
    return _data == null
        ? Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Global.primaryColor,
              child: Center(child: CircularProgressIndicator()),
            ),
          )
        : Scaffold(
            appBar: AppBar(
              title: Text("宠物简介 - ${_data['name']}",
                  style: TextStyle(fontSize: 14)),
              elevation: 0,
              backgroundColor: Global.primaryColor,
              actions: <Widget>[
                IconButton(
                  icon: Icon(
                    _mainManager.isLike(_info)
                        ? Icons.favorite
                        : Icons.favorite_border,
                    color: _mainManager.isLike(_info)
                        ? Color(0xFFC62A1F)
                        : Global.backgroundColor,
                  ),
                  tooltip: '收藏',
                  onPressed: () {
                    _mainManager.like(_info);
                  },
                )
              ],
            ),
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(
                color: Global.backgroundColor,
              ),
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      margin: EdgeInsets.all(10),
                      child: Stack(
                        children: [
                          Positioned(
                            child: Container(
                              padding: EdgeInsets.fromLTRB(5, 15, 5, 5),
                              margin: EdgeInsets.only(top: 20),
                              decoration: BoxDecoration(
                                border: Border.all(
                                  width: 1.5,
                                  color: Global.primaryColor.withOpacity(0.5),
                                ),
                                borderRadius: BorderRadius.circular(5),
                              ),
                              child: Row(
                                children: [
                                  Container(
                                    width: 80,
                                    decoration: BoxDecoration(
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(5)),
                                    ),
                                    child: ClipRRect(
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(5)),
                                      child: FadeInImage.assetNetwork(
                                        placeholder:
                                            'assets/images/placeholder.png',
                                        fadeInDuration:
                                            const Duration(milliseconds: 0),
                                        image: _data['img'],
                                      ),
                                    ),
                                  ),
                                  SizedBox(width: 10),
                                  Expanded(
                                    child: Text(
                                      _data['intro'],
                                      style: TextStyle(
                                        color: Global.fontColor,
                                        fontSize: 12,
                                        fontWeight: FontWeight.w500,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Positioned(
                            top: 5,
                            left: 10,
                            child: Container(
                              decoration: BoxDecoration(
                                color: Global.backgroundColor,
                              ),
                              padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Text(
                                    _data['name'],
                                    style: TextStyle(
                                      color: Global.primaryColor,
                                      fontSize: 22,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                  SizedBox(width: 10),
                                  Text(
                                    _data['valtxt'],
                                    style: TextStyle(
                                      color:
                                          Global.primaryColor.withOpacity(0.8),
                                      fontSize: 11,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Column(
                      children: renderDesc(_data['desc']),
                    ),
                    SizedBox(height: 35),
                  ],
                ),
              ),
            ),
          );
  }
}
